<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

/*
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}
*/

.link {
  fill: none;
  stroke: #bbb;
}

div#tool{float:right;background-color:#efefef;width:200px;height:300px}
div#chart{width:800px;float:left;}
div#content {background-color:#efefef;clear:both;}



#category{
	text-align:left;
	font-weight: 900;
	font-size:20px;
}


.node circle {
  cursor: move;
  fill-opacity: .2;
 
}
.node circle.active {
 
  fill-opacity: .1;
}
.node text {
  pointer-events: none;
  text-shadow: 0 1px 0 #fff;
}

.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .9;
}
.link.active {

  stroke-opacity: .1;
}
.node.active {
 
  fill-opacity: .1;
}
.link:hover {
  stroke-opacity: .7;
}

@font-face
{
font-family: myFont;
src: url('yahei.ttf')
}

circle {
 	fill:"#111";
  	fill-opacity: .1;
  	cursor: hand;
 
}

.leaf circle {
	cursor: hand;
  	fill-opacity: .2;
}

text {
  font: 10px,italic arial,sans-serif;;
}

.foreground path {
  fill: none;
  stroke-opacity: .5;
  stroke-width: 1.5px;
}

.foreground path.fade {
  stroke: #000;
  stroke-opacity: .01;
}

.legend {
  font-size: 18px;
  font-style: oblique;
}

.legend line {
  stroke-width: 2px;
}

.商代中期 {
	stroke: #ff7f0e;
}
.商代晚期 {
	stroke: #aec7e8;
}
.商代晚期或西周早期 {
	stroke: #555;
}
.西周 {
	stroke: #ffbb78;
}

.西周早期 {
	stroke: #d62728;
}

.西周早期或中期 {
	stroke: #98df8a;
}
.西周中期 {
	stroke: #2ca02c;
}
.西周早期或中期 {
	stroke: #ff9896;
}
.西周晚期 {
	stroke: #9467bd;
}
.西周晚期或春秋早期 {
	stroke: #c5b0d5;
}
.春秋 {
	stroke: #8c564b;
}
.春秋早期 {
	stroke: #c49c94;
}
.春秋中期 {
	stroke: #e377c2;
}
.春秋中期或晚期 {
	stroke: #f7b6d2;
}
.春秋晚期 {
	stroke: #7f7f7f;
}
.春秋戰國 {
	stroke: #c7c7c7;
}
.春秋晚期或戰國早期 {
	stroke: #bcbd22;
}
.戰國 {
	stroke: #dbdb8d;
}
.戰國早期 {
	stroke: #17becf;
}
.戰國早期或中期 {
	stroke: #9edae5;
}
.戰國中期 {
	stroke: #e7ba52;
}
.戰國中期或晚期 {
	stroke: #1f77b4;
}
.戰國晚期 {
	stroke: #00F;
}

.brush .extent {
  fill-opacity: .3;
  stroke: #fff;
  shape-rendering: crispEdges;
}

.axis line, .axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  text-shadow: 0 1px 0 #fff;
  cursor: move;
}
</style>
<body>
<!-- <script src="../d3.v3.min.js"></script> -->
<script src="../d3.js"></script>
<script src="data/matrix.js"></script>
		<div id="serverResponse"></div>
		<div id="bpg">
			<div id="mainDiv">
				<div id="uperWin" style="width:100%;height:500px;border:#0F0 solid 5px;border-bottom:#0F0 solid 0px;">
					<div id="nav1" style="width:700px;height:500px;float:left;border-right:#0F0 solid 5px;">
						<div id="nav1SvgDiv"></div>
					</div>
					<div id="nav2" style="width:500px;height:500px;float:left;border-right:#0F0 solid 5px;">
						<div id="nav2SvgDiv" style="float:middle;"></div>
					</div>
					<div id="toolBars">
						<form action="#">
							<table>
								<tr>
									<td><input type="text" id="keyword" value="" size="20"></td>
									<td><input type="button" value="Search"
								onclick="" /></td>
								</tr>
							</table>
							
							<!--
<input type="button" value="Send parameters using GET"
								onclick="doRequestUsingGET();" />
-->
							<!--调用Get方法主函数-->
							<!--
<br />
							<br />
							<input type="button" value="Send parameters using POST"
								onclick="doRequestUsingPOST();" />
-->
							<!--调用POST方法主函数-->
						</form>
					</div>
				</div>
				<div id="lowerWin" style="float: left;width:250px;height:250px;clear:both;border:#0F0 solid 5px;">
					<div id="storyPath">
						<div id="chart"></div>
						<!-- <div id="content"><p id=category>content</p></div>  -->
					</div>
				</div>
			</div>
		</div>
		
<script type="text/javascript">
        var xmlHttp;
        //创建XMLhttpRequest对象
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
        }

        //生成传递到服务器的参数查询串，参数值由页面表单填写得到
       function createQueryString() {
            var firstName = "firstName";
            var middleName = "middleName";
            var birthday = "birthday";
            var queryString = "firstName=" + firstName + "&middleName=" + middleName
            + "&birthday=" + birthday;
            return queryString;
        }

        //点击按钮响应的Get方法主函数
        //Get方法把参数值以名=值方式在xmlHttp.open("GET", queryString, true)中传递,queryString的形式为URL?参数名=值&参数名=值...;而xmlHttp.send(null);
        function doRequestUsingGET() {
            createXMLHttpRequest();//第一步：创建XMLHttpRequest对象
            var queryString = "../../GetAndPostExample?";
            queryString = queryString + createQueryString()
            + "&timeStamp=" + new Date().getTime();//第二步：定义传递的参数值字符串
            xmlHttp.open("GET", queryString, true);//第三步：建立与服务器的请求
            xmlHttp.onreadystatechange = handleStateChange;//第四步：监听状态-->转到监听状态函数    
            xmlHttp.send(null);//第五步：发送请求，并且立即返回
        }

        //点击按钮响应的POST方法主函数
        //POST方法把参数值以名=值方式在xmlHttp.send(queryString)中传递,queryString的形式为参数名=值&参数名=值...;
        function doRequestUsingPOST() {
            createXMLHttpRequest();//第一步：创建XMLHttpRequest对象
            var url = "../../GetAndPostExample?timeStamp=" + new Date().getTime();
            var queryString = createQueryString();//第二步：定义传递的参数值字符串
            xmlHttp.open("POST", url, true);//第三步：建立与服务器的请求
            xmlHttp.onreadystatechange = handleStateChange;//第四步：监听状态-->转到监听状态函数
            xmlHttp.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded;");
            xmlHttp.send(queryString);//第五步：发送请求，并且立即返回
        }

        //监听状态函数
        function handleStateChange() {
            if(xmlHttp.readyState == 4) {
                if(xmlHttp.status == 200) {
                parseResults();//-->转到函数parseResults输出从服务器返的值
                }
            }
        }

        //在页面显示从服务器传来的结果
       function parseResults() {
            var responseDiv = document.getElementById("serverResponse");
            if(responseDiv.hasChildNodes()) {
            responseDiv.removeChild(responseDiv.childNodes[0]);
        }
        var responseText = document.createTextNode(xmlHttp.responseText);//
        responseDiv.appendChild(responseText);
        }
</script>
<script src="scripts/draw.js"></script>
<script src="scripts/framework.js"></script>
<script src="scripts/pathline.js"></script>
<script type="text/javascript" src="../d3.csv.js"></script>
	</body>
</html>